<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>志愿者信息审核</title>
    <link rel="stylesheet" href="../../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../../lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../static/js/webApi.js"></script>
    <style type="text/css">
        html,
        body,
        #app,
        .el-container {
            padding: 0px;
            margin: 0px;
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }

        .el-divider--horizontal {
            display: block;
            height: 1px;
            width: 100%;
            margin: 8px 0px;
        }

        .el-menu--horizontal>.el-menu-item {
            height: 50px;
        }
    </style>
</head>

<body>
    <el-container id="app">
        <el-container>
            <el-main style="width: 100%;">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                    style="margin-bottom: 10px;">
                    <el-menu-item v-for="(item,index) in tabPaneList" :index="index">{{ item.name }}</el-menu-item>
                </el-menu>
                <vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source stripe
                    @page-change="handlePageChange" :height="tableHeight" size="mini" :checkbox-config="tableRadio"
                    :toolbar="tableToolbar" :pager-config="tablePage" :loading="dataLoading"
                    @cell-dblclick="cellDBLClickEvent" :edit-config="{trigger:'click', mode:'row'}"
                    :header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent"
                    :data="tableData" :sort-config="{remot:true}">
                    <vxe-table-column type="checkbox" width="60" align="center" fixed="left"></vxe-table-column>
                    <vxe-table-column field="userName" title="志愿者姓名" width="120" align="center" fixed="left">
                    </vxe-table-column>
                    <vxe-table-column field="sex" title="性别" width="60" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="age" title="年龄" width="60" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="education" title="学历" width="60" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="industry" title="从事行业" width="120" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="realAccNbr" title="联系电话" width="170" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="political" title="政治面貌" width="120" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="unit" title="公司/单位名称" width="200" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="positionHeld" title="职位" width="120" align="center">
                    </vxe-table-column>
                    <vxe-table-column field="companyIntroduction" title="公司/单位介绍" align="left">
                    </vxe-table-column>
                    <vxe-table-column field="cTime" title="创建时间" width="180" align="center">
                    </vxe-table-column>
                </vxe-grid>

                <vxe-modal ref="xModal" v-model="showModal" title="审核" width="500" :loading="submitLoading" resize
                    destroy-on-close @close="closeEvent('submitForm')">
                    <el-form :model="submitForm" :rules="formRules" ref="submitForm" label-width="80px"
                        label-position="right" size="mini">
                        <el-row>
                            <el-col>
                                <el-form-item label="是否通过" prop="result">
                                    <el-select v-model="submitForm.result" placeholder="请选择是否通过" style="width:100%">
                                        <el-option v-for="item in result_options" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="审核备注">
                                    <el-input placeholder="请输入审核备注" v-model="submitForm.desc" clearable
                                        style="width:100%">
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item style="height:auto;padding:4px 20px;text-align: right;">
                            <el-button type="primary" icon="el-icon-folder" @click="submitEvent('submitForm')"
                                :disabled="disabled" v-cloak>保存</el-button>
                            <el-button type="warning" icon="el-icon-refresh" @click="resetEvent('submitForm')" v-cloak>
                                重置
                            </el-button>
                            <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('submitForm')"
                                v-cloak>
                                退出
                            </el-button>
                        </el-form-item>
                    </el-form>
                </vxe-modal>
            </el-main>
        </el-container>
    </el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data () {
                return {
                    innerHeight: "100%",
                    tableHeight: '100%',
                    tabPaneList: [{
                        name: '待审核申请'
                    }, {
                        name: '已审核申请'
                    }],
                    activeName: 0,
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [{
                            code: 'add',
                            name: '新增',
                            icon: 'fa fa-plus vxe-primary-color'
                        }, {
                            code: 'update',
                            name: '编辑',
                            icon: 'fa fa-edit vxe-primary-color'
                        }, {
                            code: 'del',
                            name: '删除',
                            icon: 'fa fa-trash vxe-primary-color'
                        },],
                    },
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: [
                            'Sizes',
                            'PrevJump',
                            'PrevPage',
                            'Number',
                            'NextPage',
                            'NextJump',
                            'FullJump',
                            'Total'
                        ]
                    },
                    dataLoading: false,
                    tableData: [],
                    activeIndex: 0,
                    showModal: false,
                    submitLoading: false,
                    result_options: [{
                        label: '通过',
                        value: '通过'
                    }, {
                        label: '驳回',
                        value: '驳回'
                    }],
                    submitForm: {
                        result: "",
                        desc: ""
                    },
                    formRules: {
                        result: [{
                            required: true,
                            message: '请选择是否通过'
                        }],
                    },
                    disabled: false
                }
            },
            created () {
                this.getWaitTask();
            },
            mounted () {
                this.tableHeight = iwndow.innerHeight - this.$refs.xGrid.$el.offsetTop - 64;
            },
            methods: {
                handlePageChange () {

                },
                cellDBLClickEvent ({
                    row,
                    rowIndex,
                    $rowIndex,
                    column,
                    columnIndex,
                    $columnIndex,
                    $event
                }) {
                    if (columnIndex > 1) {
                        this.editEvent(row);
                    }
                },
                handleClick () {

                },
                toolbarButtonClickEvent ({
                    code
                }, event) {
                    let self = this;
                    switch (code) {
                        case 'add':
                            this.selectRow = 0;
                            this.showModal = true;
                            break;
                        case 'update':
                            if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
                                let row = this.$refs.xGrid.getCheckboxRecords()[0];
                                this.submitForm.userName = row.userName;
                                this.submitForm.sex = row.sex;
                                this.submitForm.age = row.age;
                                this.submitForm.education = row.education;
                                this.submitForm.industry = row.industry;
                                this.submitForm.industryCode = row.industry;
                                this.submitForm.realAccNbr = row.realAccNbr;
                                this.submitForm.political = row.political;
                                this.submitForm.politicalCode = row.political;
                                this.submitForm.unit = row.unit;
                                this.submitForm.positionHeld = row.positionHeld;
                                this.submitForm.companyIntroduction = row.companyIntroduction;
                                this.submitForm['id'] = row.id
                                this.selectRow = 1;
                                this.showModal = true;
                            } else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "只能选择一条数据！",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请至少选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'del':
                            if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
                                let del_row = this.$refs.xGrid.getCheckboxRecords()[0];
                                if (del_row.length > 0) {
                                    this.$confirm('确认要删除' + del_row.name + '这条培训课程的信息吗?', '提示', {
                                        confirmButtonText: '确定',
                                        cancelButtonText: '取消',
                                        type: 'warning'
                                    }).then(() => {
                                        webApi("/volunteer/del?ids=" + ids, "get", {}, function (res) {
                                            if (res.code == 200) {
                                                self.$message({
                                                    type: 'success',
                                                    message: '删除成功!'
                                                });
                                                self.getTrainingList();
                                            } else {
                                                self.$XModal.message({
                                                    message: res.msg,
                                                    status: 'error'
                                                })
                                            }
                                        }, function (error) {
                                            self.$XModal.message({
                                                message: res.msg,
                                                status: 'error'
                                            })
                                        });
                                    }).catch(() => {

                                    });
                                } else {
                                    this.$message({
                                        message: "请选择需要删除的数据行",
                                        type: 'warning',
                                        center: true
                                    });
                                }
                            } else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "只能选择一条数据！",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请至少选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                    }
                },
                getWaitTask () {
                    let self = this;
                    const params = {
                        bizType: "",
                        title: "",
                        bizId: "",
                    };
                    webApi("/comm/getWaitTask", "post", params, function (res) {
                        if (res.code == 0) {
                            self.tableData = res.data;
                        } else {
                            self.$XModal.message({
                                message: res.msg,
                                status: 'error'
                            })
                        }
                    }, function (error) {
                        self.$XModal.message({
                            message: res.msg,
                            status: 'error'
                        })
                    });
                },
                getDoneTask () {
                    let self = this;
                    const params = {
                        bizType: "",
                        title: "",
                        bizId: "",
                    };
                    webApi("/comm/getDoneTask", "post", params, function (res) {
                        if (res.code == 0) {
                            self.tableData = res.data;
                        } else {
                            self.$XModal.message({
                                message: res.msg,
                                status: 'error'
                            })
                        }
                    }, function (error) {
                        self.$XModal.message({
                            message: res.msg,
                            status: 'error'
                        })
                    });
                },
                submitEvent () {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // this.submitLoading = true;
                            // this.disabled = true;
                            // let self = this;
                            // webApi('//volunteer/save', 'post', this.submitForm, function (data) {
                            //     if (data.code == 200) {
                            //         self.$message({
                            //             message: data.msg,
                            //             type: 'success',
                            //             center: true
                            //         });
                            //         self.getVolunteerList();
                            //         self.showModal = false;
                            //         self.$refs[formName].resetFields();
                            //     } else {
                            //         self.$message({
                            //             message: data.msg,
                            //             type: 'error',
                            //             center: true
                            //         });
                            //     };
                            // }, function (xhr, type, errorThrown) { })
                            // self.submitLoading = false;
                            // self.disabled = false;
                        } else {
                            this.$XModal.message({
                                message: "请填写带*的信息",
                                status: 'error'
                            });
                            return false;
                        }
                    });
                },
                resetEvent (formName) {
                    this.$refs[formName].resetFields();
                },
                closeEvent (formName) {
                    this.showModal = false;
                    this.$refs[formName].resetFields();
                },
            }
        };
        var app = Vue.extend(main);
        new app().$mount('#app');
    }
</script>

</html>